<template>
  <div class="board-body">
    <dv-full-screen-container class="body-container">
      <div class="head">
        <div class="title"><label>入库Port口</label></div>
      </div>
      <div class="content">
        <div class="top">
          <dv-border-box-12 class="content-border">
            <!-- 承载el-table -->
            <div ref="scrollContainer" class="scrollContainer" style="overflow: scroll;height: 100%;">
              <el-table ref="top-table" class="top-table" :data="listOne" :row-class-name="tableRowClassName" :max-height="tableOneMaxHeight" style="width: 100%;">
                <el-table-column prop="one" label="当前入库模式" />
                <el-table-column prop="two" label="入库物料母托模式" />
                <el-table-column prop="three" label="已入库良品托数" />
                <el-table-column prop="four" label="已入库不良品托数" />
                <el-table-column prop="five" label="已入库容器数量" />
              </el-table>
            </div>
          </dv-border-box-12>
        </div>
        <div class="center">
          <dv-border-box-12 class="content-border">
            <div class="content-title">当前Port物料</div>
            <el-table ref="center-table" :data="listTwo" :row-class-name="tableRowClassName" :max-height="tableTwoMaxHeight" style="width: 100%;">
              <el-table-column prop="one" label="母托条码" />
              <el-table-column prop="two" label="料号" />
              <el-table-column prop="three" label="物料描述" />
              <el-table-column prop="four" label="客户" />
              <el-table-column prop="five" label="数量" />
              <el-table-column prop="six" label="生产时间" />
              <el-table-column prop="seven" label="入库时间" />
              <el-table-column prop="eight" label="入库状态" />
            </el-table>
          </dv-border-box-12>
        </div>
        <div class="bottom">
          <dv-border-box-12 class="content-border">
            <el-table ref="bottom-table" :data="listThree" :row-class-name="tableRowClassName" :max-height="tableThreeMaxHeight" style="width: 100%;">
              <el-table-column prop="one" label="设备名称" />
              <el-table-column prop="two" label="状态" />
              <el-table-column prop="three" label="异常开始时间" />
              <el-table-column prop="four" label="异常持续时间" />
              <el-table-column prop="five" label="异常原因(人工输入)" />
            </el-table>
          </dv-border-box-12>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listOne: [
        {one: '模式1',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式2',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式3',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式4',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式5',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式6',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式6',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式6',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式6',two: '模式2',three: 100,four: 100,five: 100},
        {one: '模式6',two: '模式2',three: 100,four: 100,five: 100}
      ],
      listTwo: [
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
        {one: 'FGA1234567',two: 'W1234567890',three: '卡箱板',four: 'BYD',five: '100', six: '2025-01-01 00:00:00', seven: '2025-01-01 00:00:00', eight: '已完成'},
      ],
      listThree: [
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'},
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'},
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'},
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'},
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'},
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'},
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'},
        {one: 'XXX', two: 'XXX', three: '2025-01-01 00:00:00', four: '2025-01-01 00:00:00', five: 'XXXXXXXXXX'}
      ],
      tableOneMaxHeight: 0, // 动态计算的高度
      tableTwoMaxHeight: 0, // 动态计算的高度
      tableThreeMaxHeight: 0, // 动态计算的高度
      timer: null
    }
  },
  mounted() {
    this.getHeight()
    this.initAutoScroll()
  },
  beforeDestroy() {
  },
  methods: {
    getHeight() {
      document.addEventListener('DOMContentLoaded', () => {
        const top = document.querySelector('.top')
        const center = document.querySelector('.center')
        const centerTitle = document.querySelector('.content-title')
        const bottom = document.querySelector('.bottom')
        const topHeight = top.children[0].children[1].offsetHeight
        const centerHeight = center.children[0].children[1].offsetHeight
        const centerTitleHeight = centerTitle.offsetHeight
        const bottomHeight = bottom.children[0].children[1].offsetHeight
        if (topHeight) {
          this.tableOneMaxHeight = topHeight
        }
        if (centerHeight) {
          this.tableTwoMaxHeight = centerHeight - centerTitleHeight
        }
        if (bottomHeight) {
          this.tableThreeMaxHeight = bottomHeight
        }
      })
    },
    initAutoScroll() {
      this.$nextTick(() => {
        const t = 3000
        // const step = 40
        const box = document.getElementsByClassName('el-table__body-wrapper')
        const content = document.getElementsByClassName('el-table__body')
        // 定义一个平滑滚动的函数
        const smoothScroll = (element, target) => {
          const start = element.scrollTop;
          const change = target - start;
          const duration = 1500
          let startTimestamp = null
          const step = (timestamp) => {
            if (!startTimestamp) startTimestamp = timestamp
            const time = timestamp - startTimestamp
            const current = easeInOutCubic(time, start, change, duration)
            element.scrollTop = current
            if (time < duration) {
              requestAnimationFrame(step)
            }
          }
          requestAnimationFrame(step)
        }
        // 缓动函数，用于平滑滚动
        const easeInOutCubic = (t, b, c, d) => {
          t /= d / 2;
          if (t < 1) return c / 2 * t * t * t + b
          t -= 2;
          return c / 2 * (t * t * t + 2) + b
        }
        this.timer = setInterval(() => {
          for (let i = 0; i < box.length; i++) {
            const boxStep = document.getElementsByClassName('el-table__body')
            // console.log(boxStep[i].children[1].children[0].offsetHeight)
            const targetScrollTop = box[i].scrollTop + boxStep[i].children[1].children[0].offsetHeight
            if (targetScrollTop >= content[i].scrollHeight - box[i].offsetHeight) {
              smoothScroll(box[i], 0)
            } else {
              smoothScroll(box[i], targetScrollTop)
            }
          }
        }, t)
      })
    },
    tableRowClassName({rowIndex}) {
      return rowIndex % 2 === 0 ? 'row-even' : 'row-odd'
    }
  }
}
</script>

<style scoped lang="less">
.body-container {
  color: #FFF;
  background: url(../assets/newImg/bg.png);
  margin: 0 0;
  padding: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
}
.head{
	// position: absolute;
	left: 25%;
	top: 0.2rem;
	right: 25%;
  height: 3.5rem;
  z-index: 1;
  box-sizing: border-box;
  .title{
    font-size: 1.8rem;
    text-align: center;
    padding-top: 0.2em;
    height: 3.2rem;
    background: url(../assets/newImg/head-bg.png) bottom center no-repeat;
  }
}
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .top {
    box-sizing: border-box;
    height: 30%;
    .content-border {
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .center {
    box-sizing: border-box;
    height: 40%;
    .content-title {
      padding-top: 0.2rem;
      text-align: center;
      font-size: 1.8rem;
    }
    .content-border {
      padding: 10px;
      box-sizing: border-box;
    }
  }
  .bottom {
    box-sizing: border-box;
    height: 30%;
    .content-border {
      padding: 10px;
      box-sizing: border-box;
    }
  }
}

// el-table相关
// el-table的margin
/deep/ .el-table {
  margin: 0 !important;
}

// el-tablk的宽度占满
/deep/ .el-table__body {
  width: 100% !important;
}

// 表头背景颜色
/deep/ .el-table th.el-table__cell {
  background-color: #133653 !important;
  font-size: 1rem;
}

// 隔行换色
// /deep/ .el-table .row-even {
//   background-color:#000000 !important;
// }

/deep/ .el-table .row-odd {
  background-color: #0d2b44 !important;
}


// 表内容背景颜色
.el-table,
.el-table__expanded-cell {
  background-color: transparent;
}
// 将暂无信息的下划线去除
.el-table::before {
  display: none !important;
}
// el-table相关

// 滑轨(滚动条)
.content-border ::-webkit-scrollbar {
  width: 0px; /* 设置滚动条的宽度 */
}
// 滑轨(滚动条)
</style>
